<!--个人资料-->
<template>
  <div id="personalDataIndex" class="app-container flex-row">
    <div class="common-sub-vertical-menu">
      <ul class="vertical-menu">
        <li v-for="item in views" :key="item.view" :class="selectedView.view===item.view?'active':''" @click="changeView(item)">
          <i class="icon iconfont " :class="item.icon" />
          <span>{{ item.name }}</span>
        </li>
      </ul>
    </div>
    <div class="personal-container flex-main flex-1">
      <div class="common-title m-b-0 m-l-10"><h2 class="bold">{{ selectedView.name }}</h2></div>
      <div class="p10" style="overflow: auto; flex: 1;">
        <component :is="selectedView.view" />
      </div>
    </div>
  </div>
</template>
<script>
import company from './company'
import user from './user'
import avatar from './avatar'
import password from './password'
import mobile from './mobile'
import email from './email'
import subordinate from './subordinate'
import loginLog from './loginLog'
export default {
  components: { company, user, avatar, password, mobile, email, subordinate, loginLog },

  data() {
    return {
      selectedView: { view: 'user', name: '企业信息' },
      views: [
        { view: 'company', name: '企业信息', icon: 'icon-qiyexinxi' },
        { view: 'user', name: '用户资料', icon: 'icon-yonghuziliao' },
        { view: 'avatar', name: '修改头像', icon: 'icon-xiugaitouxiang' },
        { view: 'password', name: '修改密码', icon: 'icon-modify-password' },
        { view: 'mobile', name: '更换手机号', icon: 'icon-shouji_huaban1' },
        { view: 'email', name: '更换邮箱', icon: 'icon-youxiang' },
        { view: 'subordinate', name: '下属员工', icon: 'icon-xiashugendan' },
        { view: 'loginLog', name: '登录记录', icon: 'icon-denglujilu' }
      ]
    }
  },
  watch: {
    searchValue(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    var queryView = this.$route.query.view
    if (queryView) {
      var view = this.views.filter(item => {
        return item.view === queryView
      })
      if (view.length > 0) {
        this.selectedView = view[0]
      }
    }
  },
  methods: {
    changeView(val) {
      this.selectedView = val
    }
  }
}
</script>

<style lang="scss" >
  #personalDataIndex{
    .personal-container{
      background-color: #fff;
    }
  }
</style>
